<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据安全平台</title>
  <!-- 引入Element Plus样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <!-- 引入Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- 引入Element Plus -->
  <script src="https://unpkg.com/element-plus"></script>
  <!-- 引入图标 -->
  <script src="https://unpkg.com/@element-plus/icons-vue"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
      background-color: #f5f7fa;
      color: #333;
    }
    
    .app-container {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .main-content {
      flex: 1;
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
    }
    
    .page-title {
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #e4e7ed;
    }
    
    .card-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    
    .card {
      background: white;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 20px;
      transition: all 0.3s;
    }
    
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
    }
    
    .card-header {
      font-weight: bold;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
    }
    
    .card-header i {
      margin-right: 8px;
      color: #409eff;
    }
    
    .card-content {
      color: #606266;
    }
    
    .data-table {
      margin-top: 20px;
    }
    
    .step-container {
      margin: 20px 0;
    }
    
    .status-tag {
      margin-left: 10px;
    }
    
    .action-buttons {
      margin-top: 20px;
      display: flex;
      gap: 10px;
    }
    
    .metadata-form {
      margin-top: 20px;
    }
    
    .form-section {
      margin-bottom: 20px;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #409eff;
      border-left: 4px solid #409eff;
      padding-left: 10px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="app-container">
      <!-- 顶部导航 -->
      <el-container>
        <el-header style="background-color: #001529; color: white; display: flex; align-items: center; justify-content: space-between;">
          <div style="display: flex; align-items: center;">
            <h2 style="margin: 0;">数据安全平台</h2>
          </div>
          <div>
            <el-menu
              :default-active="activeMenu"
              mode="horizontal"
              background-color="#001529"
              text-color="#fff"
              active-text-color="#ffd04b"
              @select="handleMenuSelect"
              style="border-bottom: none;"
            >
              <el-menu-item index="provider">数据提供方</el-menu-item>
              <el-menu-item index="consumer">数据使用方</el-menu-item>
              <el-menu-item index="dataspace">数据空间</el-menu-item>
            </el-menu>
          </div>
          <div>
            <el-button type="text" style="color: white;">
              <el-icon><User /></el-icon>
              管理员
            </el-button>
          </div>
        </el-header>

        <!-- 主内容区域 -->
        <el-main class="main-content">
          <!-- 数据提供方页面 -->
          <div v-if="activeMenu === 'provider'">
            <h2 class="page-title">数据提供方</h2>
            
            <!-- 步骤指示器 -->
            <el-steps :active="providerStep" align-center class="step-container">
              <el-step title="连接到数据空间" description="身份认证和节点部署"></el-step>
              <el-step title="准备数据" description="文件/API和元数据"></el-step>
              <el-step title="发布数据" description="发布数据和版本管理"></el-step>
            </el-steps>
            
            <!-- 步骤1：连接到数据空间 -->
            <div v-if="providerStep === 1" class="card">
              <div class="card-header">
                <el-icon><Connection /></el-icon>
                连接到数据空间
              </div>
              <div class="card-content">
                <p>基于DHP方案进行身份认证和注册，并在本地网络部署NHP数据经纪件。</p>
                
                <el-form :model="providerConnectForm" label-width="120px" style="margin-top: 20px;">
                  <el-form-item label="公钥">
                    <el-input v-model="providerConnectForm.publicKey" type="textarea" :rows="3"></el-input>
                  </el-form-item>
                  <el-form-item label="身份信息">
                    <el-input v-model="providerConnectForm.identity" type="textarea" :rows="3"></el-input>
                  </el-form-item>
                  <el-form-item label="私钥签名">
                    <el-input v-model="providerConnectForm.signature" type="textarea" :rows="3"></el-input>
                  </el-form-item>
                </el-form>
                
                <div class="action-buttons">
                  <el-button type="primary" @click="providerStep = 2">下一步</el-button>
                </div>
              </div>
            </div>
            
            <!-- 步骤2：准备数据 -->
            <div v-if="providerStep === 2" class="card">
              <div class="card-header">
                <el-icon><Folder /></el-icon>
                准备数据
              </div>
              <div class="card-content">
                <el-tabs v-model="dataPrepTab">
                  <el-tab-pane label="文件 & API" name="file">
                    <el-upload
                      class="upload-demo"
                      drag
                      action="#"
                      multiple
                      style="margin-top: 20px;"
                    >
                      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                    
                    <div class="metadata-form">
                      <h3 style="margin: 20px 0 10px 0;">元数据</h3>
                      
                      <div class="form-section">
                        <div class="section-title">技术元数据</div>
                        <el-form :model="techMetadata" label-width="120px">
                          <el-form-item label="数据格式">
                            <el-input v-model="techMetadata.format"></el-input>
                          </el-form-item>
                          <el-form-item label="数据大小">
                            <el-input v-model="techMetadata.size"></el-input>
                          </el-form-item>
                          <el-form-item label="Schema">
                            <el-input v-model="techMetadata.schema" type="textarea" :rows="3"></el-input>
                          </el-form-item>
                        </el-form>
                      </div>
                      
                      <div class="form-section">
                        <div class="section-title">业务元数据</div>
                        <el-form :model="businessMetadata" label-width="120px">
                          <el-form-item label="数据标题">
                            <el-input v-model="businessMetadata.title"></el-input>
                          </el-form-item>
                          <el-form-item label="描述">
                            <el-input v-model="businessMetadata.description" type="textarea" :rows="3"></el-input>
                          </el-form-item>
                          <el-form-item label="业务领域">
                            <el-input v-model="businessMetadata.domain"></el-input>
                          </el-form-item>
                          <el-form-item label="标签">
                            <el-tag
                              v-for="tag in businessMetadata.tags"
                              :key="tag"
                              closable
                              @close="handleTagClose(tag, businessMetadata.tags)"
                              style="margin-right: 5px;"
                            >
                              {{ tag }}
                            </el-tag>
                            <el-input
                              v-if="tagInputVisible"
                              ref="tagInputRef"
                              v-model="tagInputValue"
                              size="small"
                              style="width: 100px;"
                              @keyup.enter="handleTagInputConfirm(businessMetadata.tags)"
                              @blur="handleTagInputConfirm(businessMetadata.tags)"
                            />
                            <el-button v-else size="small" @click="showTagInput">+ 新标签</el-button>
                          </el-form-item>
                        </el-form>
                      </div>
                      
                      <div class="form-section">
                        <div class="section-title">合规元数据</div>
                        <el-form :model="complianceMetadata" label-width="120px">
                          <el-form-item label="数据分类">
                            <el-select v-model="complianceMetadata.classification" placeholder="请选择">
                              <el-option label="公开" value="public"></el-option>
                              <el-option label="内部" value="internal"></el-option>
                              <el-option label="敏感" value="sensitive"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="所属地域">
                            <el-input v-model="complianceMetadata.region"></el-input>
                          </el-form-item>
                          <el-form-item label="数据来源">
                            <el-input v-model="complianceMetadata.source"></el-input>
                          </el-form-item>
                        </el-form>
                      </div>
                    </div>
                  </el-tab-pane>
                  
                  <el-tab-pane label="智能数据策略" name="policy">
                    <div style="margin-top: 20px;">
                      <p>智能数据策略是可执行代码形式描述的数据策略，通过WASM虚拟机运行。</p>
                      
                      <el-form :model="smartPolicy" label-width="120px" style="margin-top: 20px;">
                        <el-form-item label="策略名称">
                          <el-input v-model="smartPolicy.name"></el-input>
                        </el-form-item>
                        <el-form-item label="策略描述">
                          <el-input v-model="smartPolicy.description" type="textarea" :rows="3"></el-input>
                        </el-form-item>
                        <el-form-item label="策略代码">
                          <el-input v-model="smartPolicy.code" type="textarea" :rows="10"></el-input>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-tab-pane>
                </el-tabs>
                
                <div class="action-buttons">
                  <el-button @click="providerStep = 1">上一步</el-button>
                  <el-button type="primary" @click="providerStep = 3">下一步</el-button>
                </div>
              </div>
            </div>
            
            <!-- 步骤3：发布数据 -->
            <div v-if="providerStep === 3" class="card">
              <div class="card-header">
                <el-icon><Promotion /></el-icon>
                发布数据
              </div>
              <div class="card-content">
                <p>将准备好的数据和策略发布到数据空间，并支持版本管理。</p>
                
                <el-form :model="publishForm" label-width="120px" style="margin-top: 20px;">
                  <el-form-item label="数据名称">
                    <el-input v-model="publishForm.name"></el-input>
                  </el-form-item>
                  <el-form-item label="版本号">
                    <el-input v-model="publishForm.version"></el-input>
                  </el-form-item>
                  <el-form-item label="发布说明">
                    <el-input v-model="publishForm.description" type="textarea" :rows="3"></el-input>
                  </el-form-item>
                  <el-form-item label="数据策略">
                    <el-select v-model="publishForm.policy" placeholder="请选择数据策略">
                      <el-option label="基础访问控制策略" value="basic"></el-option>
                      <el-option label="高级隐私保护策略" value="advanced"></el-option>
                      <el-option label="自定义策略" value="custom"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                
                <div class="action-buttons">
                  <el-button @click="providerStep = 2">上一步</el-button>
                  <el-button type="primary" @click="publishData">发布数据</el-button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 数据使用方页面 -->
          <div v-if="activeMenu === 'consumer'">
            <h2 class="page-title">数据使用方</h2>
            
            <!-- 步骤指示器 -->
            <el-steps :active="consumerStep" align-center class="step-container">
              <el-step title="连接到数据空间" description="身份认证和节点部署"></el-step>
              <el-step title="发现与评估数据" description="浏览和评估可用数据"></el-step>
              <el-step title="数据磋商" description="确定数据使用方式"></el-step>
            </el-steps>
            
            <!-- 步骤1：连接到数据空间 -->
            <div v-if="consumerStep === 1" class="card">
              <div class="card-header">
                <el-icon><Connection /></el-icon>
                连接到数据空间
              </div>
              <div class="card-content">
                <p>基于DHP方案进行身份认证和注册，并在本地部署零信任数场服务器。</p>
                
                <el-form :model="consumerConnectForm" label-width="150px" style="margin-top: 20px;">
                  <el-form-item label="计算环境信息">
                    <el-input v-model="consumerConnectForm.environment" type="textarea" :rows="3"></el-input>
                  </el-form-item>
                  <el-form-item label="可信认证证明">
                    <el-input v-model="consumerConnectForm.certification" type="textarea" :rows="3"></el-input>
                  </el-form-item>
                </el-form>
                
                <div class="action-buttons">
                  <el-button type="primary" @click="consumerStep = 2">下一步</el-button>
                </div>
              </div>
            </div>
            
            <!-- 步骤2：发现与评估数据 -->
            <div v-if="consumerStep === 2" class="card">
              <div class="card-header">
                <el-icon><Search /></el-icon>
                发现与评估数据
              </div>
              <div class="card-content">
                <el-input
                  v-model="searchKeyword"
                  placeholder="搜索数据..."
                  style="width: 300px; margin-bottom: 20px;"
                >
                  <template #append>
                    <el-button :icon="Search">搜索</el-button>
                  </template>
                </el-input>
                
                <el-table :data="filteredData" class="data-table">
                  <el-table-column prop="name" label="数据名称" width="180"></el-table-column>
                  <el-table-column prop="provider" label="提供方" width="120"></el-table-column>
                  <el-table-column prop="domain" label="业务领域" width="120"></el-table-column>
                  <el-table-column prop="description" label="描述"></el-table-column>
                  <el-table-column label="状态" width="100">
                    <template #default="scope">
                      <el-tag :type="scope.row.status === 'available' ? 'success' : 'info'">
                        {{ scope.row.status === 'available' ? '可用' : '试用' }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150">
                    <template #default="scope">
                      <el-button size="small" @click="viewDataDetails(scope.row)">详情</el-button>
                      <el-button size="small" type="primary" @click="applyForData(scope.row)">申请</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                
                <div class="action-buttons">
                  <el-button @click="consumerStep = 1">上一步</el-button>
                  <el-button type="primary" @click="consumerStep = 3">下一步</el-button>
                </div>
              </div>
            </div>
            
            <!-- 步骤3：数据磋商 -->
            <div v-if="consumerStep === 3" class="card">
              <div class="card-header">
                <el-icon><ChatDotRound /></el-icon>
                数据磋商
              </div>
              <div class="card-content">
                <p>与数据提供方协商数据使用条款、价格、SLA等。</p>
                
                <el-tabs v-model="negotiationTab" style="margin-top: 20px;">
                  <el-tab-pane label="申请列表" name="applications">
                    <el-table :data="applications" class="data-table">
                      <el-table-column prop="dataName" label="数据名称" width="180"></el-table-column>
                      <el-table-column prop="provider" label="提供方" width="120"></el-table-column>
                      <el-table-column prop="purpose" label="使用目的"></el-table-column>
                      <el-table-column prop="status" label="状态" width="100">
                        <template #default="scope">
                          <el-tag :type="getStatusType(scope.row.status)">
                            {{ scope.row.status }}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="150">
                        <template #default="scope">
                          <el-button size="small" @click="viewApplication(scope.row)">查看</el-button>
                          <el-button v-if="scope.row.status === '待协商'" size="small" type="primary" @click="startNegotiation(scope.row)">协商</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  
                  <el-tab-pane label="磋商工作台" name="negotiation">
                    <div v-if="selectedApplication" style="margin-top: 20px;">
                      <h3>与 {{ selectedApplication.provider }} 关于 {{ selectedApplication.dataName }} 的磋商</h3>
                      
                      <div style="border: 1px solid #e4e7ed; border-radius: 4px; padding: 15px; margin-top: 15px; height: 300px; overflow-y: auto;">
                        <div v-for="(msg, index) in negotiationMessages" :key="index" 
                             :class="['message', msg.sender === 'consumer' ? 'consumer-message' : 'provider-message']">
                          <div class="message-content">{{ msg.content }}</div>
                          <div class="message-time">{{ msg.time }}</div>
                        </div>
                      </div>
                      
                      <div style="margin-top: 15px; display: flex;">
                        <el-input v-model="newMessage" placeholder="输入消息..."></el-input>
                        <el-button type="primary" style="margin-left: 10px;" @click="sendMessage">发送</el-button>
                      </div>
                      
                      <div style="margin-top: 20px;">
                        <h4>智能数据策略</h4>
                        <el-form :model="negotiationPolicy" label-width="120px">
                          <el-form-item label="使用期限">
                            <el-input v-model="negotiationPolicy.term"></el-input>
                          </el-form-item>
                          <el-form-item label="数据用量">
                            <el-input v-model="negotiationPolicy.usage"></el-input>
                          </el-form-item>
                          <el-form-item label="价格">
                            <el-input v-model="negotiationPolicy.price"></el-input>
                          </el-form-item>
                          <el-form-item label="SLA">
                            <el-input v-model="negotiationPolicy.sla" type="textarea" :rows="3"></el-input>
                          </el-form-item>
                        </el-form>
                        
                        <div class="action-buttons">
                          <el-button @click="cancelNegotiation">取消</el-button>
                          <el-button type="primary" @click="confirmNegotiation">确认协议</el-button>
                        </div>
                      </div>
                    </div>
                    <div v-else style="text-align: center; margin-top: 50px;">
                      <el-icon style="font-size: 48px; color: #c0c4cc;"><ChatLineRound /></el-icon>
                      <p style="margin-top: 10px; color: #909399;">请选择一个申请进行磋商</p>
                    </div>
                  </el-tab-pane>
                </el-tabs>
                
                <div class="action-buttons">
                  <el-button @click="consumerStep = 2">上一步</el-button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 数据空间页面 -->
          <div v-if="activeMenu === 'dataspace'">
            <h2 class="page-title">数据空间</h2>
            
            <el-tabs v-model="dataspaceTab">
              <el-tab-pane label="数据目录" name="catalog">
                <div class="card">
                  <div class="card-header">
                    <el-icon><Grid /></el-icon>
                    智能数据目录
                  </div>
                  <div class="card-content">
                    <el-input
                      v-model="catalogSearchKeyword"
                      placeholder="搜索数据目录..."
                      style="width: 300px; margin-bottom: 20px;"
                    >
                      <template #append>
                        <el-button :icon="Search">搜索</el-button>
                      </template>
                    </el-input>
                    
                    <el-table :data="filteredCatalog" class="data-table">
                      <el-table-column prop="name" label="数据名称" width="180"></el-table-column>
                      <el-table-column prop="provider" label="提供方" width="120"></el-table-column>
                      <el-table-column prop="domain" label="业务领域" width="120"></el-table-column>
                      <el-table-column prop="format" label="格式" width="100"></el-table-column>
                      <el-table-column prop="classification" label="分类" width="100">
                        <template #default="scope">
                          <el-tag :type="getClassificationType(scope.row.classification)">
                            {{ scope.row.classification }}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column prop="updateTime" label="更新时间" width="120"></el-table-column>
                      <el-table-column label="操作" width="180">
                        <template #default="scope">
                          <el-button size="small" @click="previewData(scope.row)">预览</el-button>
                          <el-button size="small" type="primary" @click="tryData(scope.row)">试用</el-button>
                          <el-button size="small" type="success" @click="applyData(scope.row)">申请</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="数据应用" name="applications">
                <div class="card">
                  <div class="card-header">
                    <el-icon><Cpu /></el-icon>
                    数据应用市场
                  </div>
                  <div class="card-content">
                    <p>提供经过验证的、安全的数据处理工具和算法，供使用方选择。</p>
                    
                    <div class="card-container">
                      <div class="card" v-for="app in dataApps" :key="app.id">
                        <div class="card-header">
                          <el-icon><Monitor /></el-icon>
                          {{ app.name }}
                        </div>
                        <div class="card-content">
                          <p>{{ app.description }}</p>
                          <el-tag type="success" style="margin-top: 10px;">已验证</el-tag>
                          <div style="margin-top: 15px;">
                            <el-button size="small" type="primary">查看详情</el-button>
                            <el-button size="small">部署</el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="数据磋商" name="negotiation">
                <div class="card">
                  <div class="card-header">
                    <el-icon><ChatDotRound /></el-icon>
                    数据磋商管理
                  </div>
                  <div class="card-content">
                    <el-table :data="allApplications" class="data-table">
                      <el-table-column prop="dataName" label="数据名称" width="180"></el-table-column>
                      <el-table-column prop="consumer" label="使用方" width="120"></el-table-column>
                      <el-table-column prop="provider" label="提供方" width="120"></el-table-column>
                      <el-table-column prop="purpose" label="使用目的"></el-table-column>
                      <el-table-column prop="status" label="状态" width="100">
                        <template #default="scope">
                          <el-tag :type="getStatusType(scope.row.status)">
                            {{ scope.row.status }}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column prop="createTime" label="申请时间" width="120"></el-table-column>
                      <el-table-column label="操作" width="150">
                        <template #default="scope">
                          <el-button size="small" @click="viewApplicationDetails(scope.row)">详情</el-button>
                          <el-button v-if="scope.row.status === '待审批'" size="small" type="primary" @click="approveApplication(scope.row)">审批</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="审计" name="audit">
                <div class="card">
                  <div class="card-header">
                    <el-icon><Document /></el-icon>
                    审计日志
                  </div>
                  <div class="card-content">
                    <p>记录所有数据访问、使用、应用执行的全链路日志。</p>
                    
                    <el-table :data="auditLogs" class="data-table">
                      <el-table-column prop="time" label="时间" width="180"></el-table-column>
                      <el-table-column prop="user" label="用户" width="120"></el-table-column>
                      <el-table-column prop="action" label="操作" width="120"></el-table-column>
                      <el-table-column prop="resource" label="资源" width="150"></el-table-column>
                      <el-table-column prop="result" label="结果" width="100">
                        <template #default="scope">
                          <el-tag :type="scope.row.result === '成功' ? 'success' : 'danger'">
                            {{ scope.row.result }}
                          </el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column prop="details" label="详情"></el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>

  <script>
    const { createApp, ref, computed } = Vue;
    const { ElMessage, ElMessageBox } = ElementPlus;
    
    // 图标引入
    const {
      User,
      Connection,
      Folder,
      Promotion,
      Search,
      ChatDotRound,
      ChatLineRound,
      Grid,
      Cpu,
      Monitor,
      Document,
      UploadFilled
    } = ElementPlusIconsVue;
    
    createApp({
      setup() {
        // 当前激活的菜单
        const activeMenu = ref('provider');
        
        // 数据提供方相关状态
        const providerStep = ref(1);
        const providerConnectForm = ref({
          publicKey: '',
          identity: '',
          signature: ''
        });
        
        const dataPrepTab = ref('file');
        const techMetadata = ref({
          format: 'CSV',
          size: '2.5MB',
          schema: 'id,name,age,address'
        });
        
        const businessMetadata = ref({
          title: '用户行为数据',
          description: '记录用户在平台上的行为数据',
          domain: '电子商务',
          tags: ['用户行为', '电商', '日志']
        });
        
        const complianceMetadata = ref({
          classification: 'sensitive',
          region: '中国',
          source: '内部采集'
        });
        
        const smartPolicy = ref({
          name: '隐私保护策略',
          description: '对敏感数据进行脱敏处理',
          code: '// WASM策略代码示例\nfunction processData(data) {\n  // 脱敏处理\n  return anonymize(data);\n}'
        });
        
        const publishForm = ref({
          name: '用户行为数据',
          version: '1.0',
          description: '初始版本发布',
          policy: 'advanced'
        });
        
        // 标签管理
        const tagInputVisible = ref(false);
        const tagInputValue = ref('');
        const tagInputRef = ref();
        
        const handleTagClose = (tag, tags) => {
          tags.splice(tags.indexOf(tag), 1);
        };
        
        const showTagInput = () => {
          tagInputVisible.value = true;
          nextTick(() => {
            tagInputRef.value.focus();
          });
        };
        
        const handleTagInputConfirm = (tags) => {
          if (tagInputValue.value) {
            tags.push(tagInputValue.value);
          }
          tagInputVisible.value = false;
          tagInputValue.value = '';
        };
        
        // 数据使用方相关状态
        const consumerStep = ref(1);
        const consumerConnectForm = ref({
          environment: '可信计算环境 v1.0',
          certification: 'TEE认证证书'
        });
        
        const searchKeyword = ref('');
        const dataList = ref([
          {
            id: 1,
            name: '用户行为数据',
            provider: '电商平台A',
            domain: '电子商务',
            description: '记录用户在平台上的行为数据',
            status: 'available'
          },
          {
            id: 2,
            name: '销售数据',
            provider: '零售商B',
            domain: '零售',
            description: '商品销售记录和库存数据',
            status: 'trial'
          },
          {
            id: 3,
            name: '地理位置数据',
            provider: '地图服务C',
            domain: '地理位置',
            description: '用户地理位置和轨迹数据',
            status: 'available'
          }
        ]);
        
        const filteredData = computed(() => {
          if (!searchKeyword.value) return dataList.value;
          return dataList.value.filter(item => 
            item.name.includes(searchKeyword.value) || 
            item.provider.includes(searchKeyword.value) ||
            item.domain.includes(searchKeyword.value)
          );
        });
        
        const negotiationTab = ref('applications');
        const applications = ref([
          {
            id: 1,
            dataName: '用户行为数据',
            provider: '电商平台A',
            purpose: '用户行为分析和推荐算法优化',
            status: '待协商'
          },
          {
            id: 2,
            dataName: '销售数据',
            provider: '零售商B',
            purpose: '销售预测和库存优化',
            status: '协商中'
          },
          {
            id: 3,
            dataName: '地理位置数据',
            provider: '地图服务C',
            purpose: '位置服务优化',
            status: '已达成'
          }
        ]);
        
        const selectedApplication = ref(null);
        const negotiationMessages = ref([
          {
            sender: 'provider',
            content: '您好，关于您申请使用的用户行为数据，我们可以提供过去3个月的数据，您看是否满足需求？',
            time: '2023-07-20 10:30:00'
          },
          {
            sender: 'consumer',
            content: '3个月的数据可以满足我们的初步分析需求，请问数据更新频率是多少？',
            time: '2023-07-20 10:35:00'
          },
          {
            sender: 'provider',
            content: '数据每日更新，每天上午9点前会更新前一天的完整数据。',
            time: '2023-07-20 10:40:00'
          }
        ]);
        
        const newMessage = ref('');
        const negotiationPolicy = ref({
          term: '6个月',
          usage: '100GB/月',
          price: '5000元/月',
          sla: '99.5%可用性，数据延迟不超过24小时'
        });
        
        // 数据空间相关状态
        const dataspaceTab = ref('catalog');
        const catalogSearchKeyword = ref('');
        const catalogData = ref([
          {
            id: 1,
            name: '用户行为数据',
            provider: '电商平台A',
            domain: '电子商务',
            format: 'CSV',
            classification: '敏感',
            updateTime: '2023-07-20'
          },
          {
            id: 2,
            name: '销售数据',
            provider: '零售商B',
            domain: '零售',
            format: 'JSON',
            classification: '内部',
            updateTime: '2023-07-19'
          },
          {
            id: 3,
            name: '地理位置数据',
            provider: '地图服务C',
            domain: '地理位置',
            format: 'Parquet',
            classification: '公开',
            updateTime: '2023-07-18'
          }
        ]);
        
        const filteredCatalog = computed(() => {
          if (!catalogSearchKeyword.value) return catalogData.value;
          return catalogData.value.filter(item => 
            item.name.includes(catalogSearchKeyword.value) || 
            item.provider.includes(catalogSearchKeyword.value) ||
            item.domain.includes(catalogSearchKeyword.value)
          );
        });
        
        const dataApps = ref([
          {
            id: 1,
            name: '数据脱敏工具',
            description: '对敏感数据进行自动脱敏处理，保护用户隐私'
          },
          {
            id: 2,
            name: '数据质量检查',
            description: '自动检查数据质量，识别数据异常和缺失'
          },
          {
            id: 3,
            name: '数据可视化',
            description: '将数据转化为直观的可视化图表和报表'
          }
        ]);
        
        const allApplications = ref([
          {
            id: 1,
            dataName: '用户行为数据',
            consumer: '数据分析公司X',
            provider: '电商平台A',
            purpose: '用户行为分析和推荐算法优化',
            status: '待审批',
            createTime: '2023-07-20'
          },
          {
            id: 2,
            dataName: '销售数据',
            consumer: '零售咨询Y',
            provider: '零售商B',
            purpose: '销售预测和库存优化',
            status: '协商中',
            createTime: '2023-07-19'
          },
          {
            id: 3,
            dataName: '地理位置数据',
            consumer: '位置服务Z',
            provider: '地图服务C',
            purpose: '位置服务优化',
            status: '已达成',
            createTime: '2023-07-18'
          }
        ]);
        
        const auditLogs = ref([
          {
            time: '2023-07-20 10:30:00',
            user: '数据分析公司X',
            action: '数据访问',
            resource: '用户行为数据',
            result: '成功',
            details: '通过API访问数据，用量2.5GB'
          },
          {
            time: '2023-07-20 09:15:00',
            user: '零售咨询Y',
            action: '数据申请',
            resource: '销售数据',
            result: '成功',
            details: '提交数据使用申请，等待审批'
          },
          {
            time: '2023-07-19 16:45:00',
            user: '位置服务Z',
            action: '策略执行',
            resource: '地理位置数据',
            result: '成功',
            details: '执行隐私保护策略，数据脱敏处理'
          }
        ]);
        
        // 方法定义
        const handleMenuSelect = (key) => {
          activeMenu.value = key;
        };
        
        const publishData = () => {
          ElMessage.success('数据发布成功！');
          providerStep.value = 1;
        };
        
        const viewDataDetails = (data) => {
          ElMessageBox.alert(
            `<div>
              <p><strong>数据名称：</strong>${data.name}</p>
              <p><strong>提供方：</strong>${data.provider}</p>
              <p><strong>业务领域：</strong>${data.domain}</p>
              <p><strong>描述：</strong>${data.description}</p>
              <p><strong>状态：</strong>${data.status === 'available' ? '可用' : '试用'}</p>
            </div>`,
            '数据详情',
            {
              dangerouslyUseHTMLString: true
            }
          );
        };
        
        const applyForData = (data) => {
          ElMessageBox.prompt('请输入使用目的', '申请数据', {
            confirmButtonText: '提交',
            cancelButtonText: '取消',
            inputPlaceholder: '例如：用户行为分析和推荐算法优化'
          }).then(({ value }) => {
            if (value) {
              applications.value.push({
                id: applications.value.length + 1,
                dataName: data.name,
                provider: data.provider,
                purpose: value,
                status: '待协商'
              });
              ElMessage.success('申请提交成功！');
            }
          });
        };
        
        const getStatusType = (status) => {
          const statusMap = {
            '待协商': 'warning',
            '协商中': 'primary',
            '已达成': 'success',
            '待审批': 'info'
          };
          return statusMap[status] || 'info';
        };
        
        const viewApplication = (app) => {
          ElMessageBox.alert(
            `<div>
              <p><strong>数据名称：</strong>${app.dataName}</p>
              <p><strong>提供方：</strong>${app.provider}</p>
              <p><strong>使用目的：</strong>${app.purpose}</p>
              <p><strong>状态：</strong>${app.status}</p>
            </div>`,
            '申请详情',
            {
              dangerouslyUseHTMLString: true
            }
          );
        };
        
        const startNegotiation = (app) => {
          selectedApplication.value = app;
          negotiationTab.value = 'negotiation';
        };
        
        const sendMessage = () => {
          if (newMessage.value.trim()) {
            negotiationMessages.value.push({
              sender: 'consumer',
              content: newMessage.value,
              time: new Date().toLocaleString()
            });
            newMessage.value = '';
            
            // 模拟对方回复
            setTimeout(() => {
              negotiationMessages.value.push({
                sender: 'provider',
                content: '收到您的消息，我们会尽快考虑您的需求。',
                time: new Date().toLocaleString()
              });
            }, 1000);
          }
        };
        
        const cancelNegotiation = () => {
          selectedApplication.value = null;
          negotiationTab.value = 'applications';
        };
        
        const confirmNegotiation = () => {
          ElMessageBox.confirm('确认达成数据使用协议？', '确认协议', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (selectedApplication.value) {
              const app = applications.value.find(a => a.id === selectedApplication.value.id);
              if (app) {
                app.status = '已达成';
              }
            }
            ElMessage.success('协议确认成功！');
            selectedApplication.value = null;
            negotiationTab.value = 'applications';
          });
        };
        
        const getClassificationType = (classification) => {
          const classificationMap = {
            '公开': 'success',
            '内部': 'warning',
            '敏感': 'danger'
          };
          return classificationMap[classification] || 'info';
        };
        
        const previewData = (data) => {
          ElMessageBox.alert(
            `<div>
              <p><strong>数据名称：</strong>${data.name}</p>
              <p><strong>提供方：</strong>${data.provider}</p>
              <p><strong>业务领域：</strong>${data.domain}</p>
              <p><strong>格式：</strong>${data.format}</p>
              <p><strong>分类：</strong>${data.classification}</p>
              <p><strong>更新时间：</strong>${data.updateTime}</p>
              <div style="margin-top: 15px; padding: 10px; background: #f5f7fa; border-radius: 4px;">
                <p style="margin: 0;">这里是数据预览内容...</p>
              </div>
            </div>`,
            '数据预览',
            {
              dangerouslyUseHTMLString: true,
              customClass: 'preview-dialog'
            }
          );
        };
        
        const tryData = (data) => {
          ElMessage.info(`已为您准备 ${data.name} 的试用数据`);
        };
        
        const applyData = (data) => {
          ElMessageBox.prompt('请输入使用目的', '申请数据', {
            confirmButtonText: '提交',
            cancelButtonText: '取消',
            inputPlaceholder: '例如：用户行为分析和推荐算法优化'
          }).then(({ value }) => {
            if (value) {
              allApplications.value.push({
                id: allApplications.value.length + 1,
                dataName: data.name,
                consumer: '当前用户',
                provider: data.provider,
                purpose: value,
                status: '待审批',
                createTime: new Date().toLocaleDateString()
              });
              ElMessage.success('申请提交成功！');
            }
          });
        };
        
        const viewApplicationDetails = (app) => {
          ElMessageBox.alert(
            `<div>
              <p><strong>数据名称：</strong>${app.dataName}</p>
              <p><strong>使用方：</strong>${app.consumer}</p>
              <p><strong>提供方：</strong>${app.provider}</p>
              <p><strong>使用目的：</strong>${app.purpose}</p>
              <p><strong>状态：</strong>${app.status}</p>
              <p><strong>申请时间：</strong>${app.createTime}</p>
            </div>`,
            '申请详情',
            {
              dangerouslyUseHTMLString: true
            }
          );
        };
        
        const approveApplication = (app) => {
          ElMessageBox.confirm('确认批准此数据使用申请？', '批准申请', {
            confirmButtonText: '批准',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            app.status = '待协商';
            ElMessage.success('申请已批准！');
          });
        };
        
        return {
          activeMenu,
          providerStep,
          providerConnectForm,
          dataPrepTab,
          techMetadata,
          businessMetadata,
          complianceMetadata,
          smartPolicy,
          publishForm,
          tagInputVisible,
          tagInputValue,
          tagInputRef,
          consumerStep,
          consumerConnectForm,
          searchKeyword,
          dataList,
          filteredData,
          negotiationTab,
          applications,
          selectedApplication,
          negotiationMessages,
          newMessage,
          negotiationPolicy,
          dataspaceTab,
          catalogSearchKeyword,
          catalogData,
          filteredCatalog,
          dataApps,
          allApplications,
          auditLogs,
          handleMenuSelect,
          handleTagClose,
          showTagInput,
          handleTagInputConfirm,
          publishData,
          viewDataDetails,
          applyForData,
          getStatusType,
          viewApplication,
          startNegotiation,
          sendMessage,
          cancelNegotiation,
          confirmNegotiation,
          getClassificationType,
          previewData,
          tryData,
          applyData,
          viewApplicationDetails,
          approveApplication
        };
      }
    })
    .use(ElementPlus)
    .component('User', User)
    .component('Connection', Connection)
    .component('Folder', Folder)
    .component('Promotion', Promotion)
    .component('Search', Search)
    .component('ChatDotRound', ChatDotRound)
    .component('ChatLineRound', ChatLineRound)
    .component('Grid', Grid)
    .component('Cpu', Cpu)
    .component('Monitor', Monitor)
    .component('Document', Document)
    .component('UploadFilled', UploadFilled)
    .mount('#app');
  </script>
</body>
</html>